<template>
  <div>
    <el-page-header :content="``" @back="back()" />
    <div class="box-header mt-5">
      <h2>{{ $t('batch.batch_operation_detail_title') }}</h2>
     <p
        class="title-second mlem-18"
        style="color: #777777"
      >{{ $t('batch.remark') }}: {{ batchOperation.remark }}</p>
      <p
        class="title-second mlem-18"
        style="color: #777777"
      >{{ $t('batch.statistic') }}: {{ $t('batch.total') }}:{{ batchOperation.devNum }}/{{ $t('batch.successed') }}:{{ batchOperation.succNum }}</p>
    </div>

    <el-card
      shadow="never"
      :body-style="{padding: '0px'}"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
        <el-form class="p-4" @submit.prevent.native inline>
          <el-form-item>
            <el-input
              v-model.trim="dataForm.devSn"
              :placeholder="$t('batch.dev_sn')"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="dataForm.status"
              :placeholder="$t('batch.cmd_status')"
              clearable
            >
              <el-option
                v-for="type in cmdStatusList"
                :key="type.val"
                :label="type.name"
                :value="type.val"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="w-8"
              @click="fetchData(pageNo = 1)"
            > <svg-icon icon-class="Search"/></el-button>
            <!-- <el-button type='primary' class='add-button' @click='addCmdHandle()' size='small'>
              Add
            </el-button>-->
          </el-form-item>
        </el-form>
      <el-table v-loading="listLoading" style="margin-bottom: 20px" :data="tableData" stripe>
        <!--'Command type', 'Number of Terminal', 'Number of Success', 'Create Time', 'Content', 'Remark' -->
        <el-table-column :label="$t('batch.dev_sn')" prop="devSn" />
        <el-table-column :label="$t('batch.cmd_status')" prop="cmdStatus">
          <template v-slot="{row}">
            <div>
              <span>{{ cmdStatusFilter(row.status) }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card></div>
</template>

<script>
import { operation2DevicePage } from '@/api/batch'
import { dateTimeFilter } from '@/filters'

export default {
  components: {
    // AddCmd
  },
  data() {
    return {
      dataForm: {
        devSn: '',
        status: ''
      },
      batchOperation: {
        remark: '1234444',
        devNum: '1',
        succNum: 0
      },
      paginationShow: true,
      succPercent: 0,
      batchOperationId: '',
      totalPage: 0,
      pageNo: 1,
      pageSize: 10,
      seletedData: [],
      listLoading: false,
      tableData: [],
      filters: [
        'Command type',
        'Number of Terminal',
        'Number of Success',
        'Create Time',
        'Content',
        'Remark'
      ],
      selectedMerchant: '',
      headers: [
        'Command type',
        'Number of Terminal',
        'Number of Success',
        'Create Time',
        'Content',
        'Remark'
      ]
    }
  },
  computed: {
    cmdStatusList() {
      return this.$t('command.statusList')
    }
  },
  mounted() {
    this.batchOperationId = this.$route.params.batchOperationId
    this.batchOperation = this.$route.params
    this.fetchData()
  },
  methods: {
    dateTimeFilter,
    cmdStatusFilter(status) {
      const statusMap = {
        0: this.$t('batch.status_list.not_performed'),
        1: this.$t('batch.status_list.successed'),
        2: this.$t('batch.status_list.failed')
      }
      return statusMap[status]
    },
    cmdTypeFilter(cmdTypeCode) {
      const cmdTypeMap = {
        A0: this.$t('command.A0.title'),
        A1: this.$t('command.A1.title'),
        A2: this.$t('command.A2.title'),
        A3: this.$t('command.A3.title'),
        A4: this.$t('command.A4.title'),
        A5: this.$t('command.A5.title'),
        A6: this.$t('command.A6.title'),
        A7: this.$t('command.A7.title'),
        A8: this.$t('command.A8.title'),
        A9: this.$t('command.A9.title'),
        AA: this.$t('command.AA.title'),
        AB: this.$t('command.AB.title'),
        AC: this.$t('command.AC.title'),
        AD: this.$t('command.AD.title'),
        B1: this.$t('command.B1.title'),
        B2: this.$t('command.B2.title'),
        B3: this.$t('command.B3.title'),
        B4: this.$t('command.B4.title'),
        B5: this.$t('command.B5.title'),
        B6: this.$t('command.B6.title'),
        B8: this.$t('command.B8.title'),
        B9: this.$t('command.B9.title'),
        BA: this.$t('command.BA.title'),
        BB: this.$t('command.BB.title'),
        D0: this.$t('command.D0.title'),
        D1: this.$t('command.D1.title'),
        D2: this.$t('command.D2.title'),
        D5: this.$t('command.D5.title'),
        setting: this.$t('batch.operationTypes.setting')
      }
      return cmdTypeMap[cmdTypeCode]
    },
    back() {
      this.$router.back(-1)
    },
    fetchData() {
      this.listLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        devSn: this.dataForm.devSn,
        status: this.dataForm.status
      }
      console.log(params)
      operation2DevicePage(this.batchOperationId, params).then((res) => {
        this.listLoading = false
        this.tableData = res.data
        this.totalPage = res.rows
      })
    },
    formatDate(row, column, cellValue, index) {
      return dateTimeFilter(cellValue)
    },
    handleSelectionChange(val) {
      this.seletedData = val
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.fetchData()
    },
    currentChangeHandle(val) {
      this.pageNo = val
      this.fetchData()
    },
    showHeader(label) {
      return this.headers.includes(label)
    }
  }
}
</script>

<style lang='scss'>
</style>

<style lang='scss' scoped>
.query-button {
  margin-left: 30px;
}

.svg-container {
  cursor: pointer;
  margin-top: 6px;
  margin-left: 20px;
  font-size: 24px;
  display: inline-block;
}

.pagination-wrapper {
  text-align: right;
}
</style>
